<template>
    <div class="knowledge">
        <van-nav-bar title='咖啡烘培' left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="konw-img">
            <img src="../../static/images/konw3.jpg" alt="" srcset="">
        </div>
        <div class="konw-con">
            <div class="konw-title1">
                <h1>
                    咖啡烘焙
                </h1>
                <p>

                    更多地体现在我们为使每一颗咖啡豆具有上佳口味而花费的心血上。星巴克烘焙的颜色可以模仿，但它特别的风味却是无法模仿的。
                </p>
            </div>
            <div class="konw-title2">
                <p>烘焙咖啡是一件让人激动的事情。我们把自己烘焙出来的咖啡叫作星巴克烘焙咖啡。但是，星巴克咖啡烘焙与别种咖啡的不同之处，不仅仅体现在它特别的颜色上，更多地体现在我们为使每一颗咖啡豆具有上佳口味而花费的心血上。星巴克烘焙的颜色可以模仿，但它特别的风味却是无法模仿的。
                </p>
            </div>
            <div class="konw-title3">
                <h1>咖啡的生命旅程</h1>
                <p>还躺在鲜红色的咖啡果里的时候，咖啡豆的精彩生命旅程就开始了。从一棵咖啡树到出产出可收获的咖啡果大约需要五年时间，每一棵树每年只出产相当于一磅的烘焙咖啡豆。在烘焙这些像卵石一样的咖啡原豆之前，咖啡的种植者们就利用自然方法或水洗方法，对这些咖啡豆进行处理。
                    通过自然的手段，在咖啡果去壳剥出咖啡豆之前，让成熟的咖啡果留在树上或采下放在地上晒干。通过这种水洗的方法，就是将咖啡豆从咖啡果里剥出来，再将这些咖啡豆放入水中浸泡，然后将它们放在宽敞的地坪上晒干，或者利用现代化设备对其进行烘干处理。
                </p>
                <i>“从一棵咖啡树到出产出可收获的咖啡果大约需要五年时间，每一棵树每年只出产相当于一磅的烘焙咖啡豆。”</i>
                <p>咖啡原豆要放在一个旋转式大圆桶里进行烘焙，然后它们开始转变。经过5到7分钟猛火高热后，咖啡豆中的水分逐步挥发。此时，咖啡豆开始变黄，并产生浓郁的香味。
                    8分钟之后，“第一次爆裂”开始，咖啡豆的体积膨胀一倍，并且发出噼里啪啦的响声。这时，它们的颜色是浅褐色的。如果你在此时停止加热，取出几粒咖啡豆尝尝滋味，你会对咖啡豆的滋味感到失望，这时的咖啡豆只有非常强的酸味，因为此时咖啡豆丰富、复杂的味道还没有散发出来。
                </p>

                <div class="title3-img">
                    <img src="https://www.starbucks.com.cn/coffee-blog/images/roast-story-1.jpg" alt="" srcset="">
                </div>
            </div>
            <div class="konw-title4">
                <h1>
                    烘焙过程
                </h1>
                <p>在容器里烘焙10到11分钟之后，咖啡豆的颜色变得越来越深，表面开始浮现出油。此刻的烘焙阶段（根据咖啡的种类而定，通常在11或15分钟），咖啡豆的浓郁风味就开始完全释放，并与咖啡豆自己的特别滋味完美融合。</p>
                <p>这时，“第二次爆响”开始了，这标志着咖啡豆的烘焙过程可以结束了。 将咖啡豆移置到冷却盘那一瞬间的情形简直让人难以置信：新鲜烘焙的咖啡豆香气四溢，噼里啪啦的声音不绝于耳。
                </p>
                <div class="title4-img">
                    <img src="https://www.starbucks.com.cn/coffee-blog/images/roast-story-2.jpg" alt="" srcset="">
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";

body {
    background-color: #ccc;

    .knowledge {
        position: relative;
        width: 100%;
        // height: 1000000px;
        background-color: #edebe9;


        .konw-img {
            width: 100%;
            height: 13.3333rem;

            img {
                width: 100%;
                height: 100%;
            }


        }

        .konw-con {
            position: absolute;
            top: 213px;
            left: 34px;
            width: 82%;
            // height: 1000000px;
            background-color: #fff;
            font-size: 13px;
            padding: 2.1333rem;
            line-height: 1.6;

            .konw-title1 {
                h1 {
                    text-align: center;
                }

                p {
                    margin-top: 1.3333rem;
                }
            }

            .konw-title2 {
                margin-top: 1.3333rem;

                p {
                    margin-top: 1.3333rem;
                }
            }

            .konw-title3 {
                margin-top: 1.3333rem;

                i {
                    margin-top: 3rem;
                    font-weight: 600;
                }

                p {
                    margin-top: 1.333rem;
                }

                .title3-img {
                    margin-top: 2rem;
                    width: 100%;
                    height: 10.3333rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .konw-title4 {
                margin-top: 1.3333rem;

                h1 {
                    margin-top: 1.3333rem;
                }

                p {
                    margin-top: 1.3333rem;
                }

                .title4-img {
                    margin-top: 2rem;
                    width: 100%;
                    height: 10.3333rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}
</style>



<script lang="ts" setup>
const onClickLeft = () => history.back();

</script>